<template>
    <page-body>
        <view class="page">
            <view class="flex benben-position-layout flex flex-wrap align-center newlist_flex_0_hjee" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
                <view class='flex flex-wrap align-center justify-between flex-sub newlist_fd0_0_hjee'>
                    <view class='flex flex-wrap align-center newlist_fd0_0_c0_hjee' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
                        <text class='fu-iconfont2  newlist_fd0_0_c0_c0_hjee'>&#xE794;</text>
                    </view>
                    <view class='flex flex-wrap align-stretch justify-center'>
                        <text class='newlist_fd0_0_c1_c0_hjee'>{{$t('新闻资讯')}}</text>
                    </view>
                    <view class='flex flex-wrap align-center justify-end newlist_fd0_0_c0_hjee'>
                    </view>
                </view>

            </view>
            <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
            <!---flex布局flex布局开始-->
            <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
                <view class='flex flex-wrap align-center'> 
                    <view>
                        <benben-flex-tabs class-name='newlist_benbenTabsfd1_0_c0_hjee' v-model="tabsTypefd1_0_c0" ref="benben_tabsfd1_0_c0" select-mark="benben_tabsfd1_0_c0" key="benben_tabsfd1_0_c0" :open-title-type='false' :open-sticky='true' :top='0' :is-show-content='false' :scrollspy='false' :tabs-info.sync="tabsInfofd1_0_c0">

                            <scroll-view @scroll="tabsInfofd1_0_c0.scrollX = $event.detail.scrollLeft" id="benben_tabsfd1_0_c0" class="benben-tabs" style="width:750rpx" :scroll-x="true" :scroll-left="tabsInfofd1_0_c0.moveX" scroll-with-animation="all .3s ease" :show-scrollbar='false' :enhanced="true">
                                <view class="benben-tabs-content" id="benben_tabsfd1_0_c0-content">
                                    <view id="benben_tabsfd1_0_c0-title" class="benben-tabs-title flex flex align-center justify-around">
                                        <view :class="{ 'checkTitlefd1_0_c0_hjee': tabsTypefd1_0_c0 == '1', 'flex flex-wrap align-center': true }" @tap="tabsTypefd1_0_c0 = '1'" :id="`benben_tabsfd1_0_c0-title-item-${'1'}`">

                                            <text @tap.stop="checktypeFunc(1)">{{$t('最新动态')}}</text>

                                        </view>
                                        <view :class="{ 'checkTitlefd1_0_c0_hjee': tabsTypefd1_0_c0 == '2', 'flex flex-wrap align-center': true }" @tap="tabsTypefd1_0_c0 = '2'" :id="`benben_tabsfd1_0_c0-title-item-${'2'}`">

                                            <text @tap.stop="checktypeFunc(2)">{{$t('学习中心')}}</text>

                                        </view>
                                        <view :class="{ 'checkTitlefd1_0_c0_hjee': tabsTypefd1_0_c0 == '3', 'flex flex-wrap align-center': true }" @tap="tabsTypefd1_0_c0 = '3'" :id="`benben_tabsfd1_0_c0-title-item-${'3'}`">

                                            <text @tap.stop="checktypeFunc(3)">{{$t('市场活动')}}</text>

                                        </view>
                                    </view>
                                    <view :style="{ left: tabsInfofd1_0_c0.lineleft, maxWidth: tabsInfofd1_0_c0.lineWidth ,}" id="benben_tabsfd1_0_c0-line" class="benben-tabs-line flex benben-flex-tabs-line newlist_linefd1_0_c0_hjee" :class="{'benben-tabs-line-active':tabsInfofd1_0_c0.isInit}"></view>
                                </view>
                            </scroll-view>

                        </benben-flex-tabs>

                    </view>
                </view>
            </view>

            <!---flex布局flex布局结束-->
            <!---flex布局4flex布局开始-->
            <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout newlist_flex_2_hjee">
                <view class='flex flex-direction flex-wrap align-stretch'>
                    <template v-for='(item,key0) in listData'>
                        <view class='flex align-center justify-between newlist_fd2_0_c0_hjee' @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/news/detail/detail?id=${item.aid}`" :key='key0'>
                            <view class='flex flex-direction flex-wrap align-stretch'>
                                <view class='flex flex-wrap align-center'>
                                    <text class='newlist_fd2_0_c0_c0_c0_c0_hjee'>{{item.title}}</text>
                                </view>
                                <view class='flex flex-wrap align-center newlist_fd2_0_c0_c0_c1_hjee'>
                                    <text class='newlist_fd2_0_c0_c0_c1_c0_hjee'>{{item.fbsj}}</text>
                                </view>
                            </view>
                            <view class='flex flex-wrap align-center' v-if="item.fmt">
                                <image class='newlist_fd2_0_c0_c1_c0_hjee' mode="aspectFill" :src='item.fmt'></image>
                            </view>
                        </view>
                    </template>
                    <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData" :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
                </view>
            </view>

            <!---flex布局4flex布局结束-->


        </view>
    </page-body>
</template>
<script>
    import pagingList from '@/common/mixin/paging_list.js';
    import {
        validate
    } from '@/common/utils/validate.js'

    export default {
        components: {},
        mixins: [pagingList],

        data() {
            return {
                "tabsInfofd1_0_c0": {
                    lineleft: '',
                    lineWidth: '',
                    moveX: 0,
                    scrollX: 0,
                    PageScrollX: 0,
                    isInit: false
                },
                "tabsTypefd1_0_c0": "1",
                "minixPagingListsApi": "",
                "pageingListApiMethod": "",
                "allowOnloadGetList": false,
                "listData": [],
                "page": 1,
                "type": ""
            };
        },
        computed: {

        },
        watch: {},
        onLoad(options) {
            this.getye74ed2de69836Func()
        },
        onUnload() {

        },
        onReady() {

        },
        onShow() {

        },
        onHide() {

        },
        onResize() {

        },
        onPullDownRefresh() {

        },
        onReachBottom(e) {

        },
        onPageScroll(e) {

        },
        methods: {
            //查询安全知识管理
            getex7385eff67f39Func() {
                this.minixPagingListsApi = global.apiUrls.post67385eff67f39;
                this.pageingListApiMethod = 'get';
                this.allowOnloadGetList = false;
                this.pagingListPostDataContent = {
                    flmc: this.type
                }
                this.listData = [];
                this.listData = this.listData;
                this.pagingListToggle();

            },
            //查询新闻列表
            getye74ed2de69836Func() {
                this.minixPagingListsApi = global.apiUrls.post674ed2de69836;
                this.pageingListApiMethod = 'get';
                this.allowOnloadGetList = false;
                this.pagingListPostDataContent = {
                    new_type: this.tabsTypefd1_0_c0
                }
                this.listData = [];
                this.listData = this.listData;
                this.pagingListToggle();

            },
            //切换
            checktypeFunc(index) {
                this.tabsTypefd1_0_c0 = index;
                this.getye74ed2de69836Func()
            },
            pagingListPostData() {
                return this.pagingListPostDataContent
            }
        }
    };
</script>
<style lang="scss" scoped>
    .page {
        width: 100vw;
        overflow-x: hidden;
        min-height: calc(100vh - var(--window-bottom));
        background: #F8F8F8;
        background-size: 100% auto;

        .newlist_flex_2_hjee {
            padding: 32rpx 32rpx 0rpx 32rpx;

            .newlist_fd2_0_c0_hjee {
                margin: 0rpx 0rpx 24rpx 0rpx;
                padding: 10rpx 24rpx 10rpx 24rpx;
                background: rgba(255, 255, 255, 1);
                background-size: 100% auto;
                border-radius: 16rpx;

                .newlist_fd2_0_c0_c0_c0_c0_hjee {
                    font-size: 28rpx;
                    color: #333;
                    font-weight: 700;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                }

                .newlist_fd2_0_c0_c0_c1_hjee {
                    margin: 20rpx 0rpx 0rpx 0rpx;

                    .newlist_fd2_0_c0_c0_c1_c0_hjee {
                        font-size: 24rpx;
                        color: rgba(153, 153, 153, 1);
                    }
                }

                .newlist_fd2_0_c0_c1_c0_hjee {
                    border-radius: 12rpx;
                    width: 248rpx;
                    height: 160rpx;
                }
            }
        }

        .checkTitlefd1_0_c0_hjee {
            font-weight: 500 !important;
            font-size: 32rpx !important;
            color: var(--benbenFontColor0) !important;
            background-color: var(--benbenFontColor3) !important;
        }

        .newlist_linefd1_0_c0_hjee {
            width: 50rpx;
            height: 8rpx;
            top: 85rpx;
            background: var(--benbenbgColor3);
            background-size: 100% auto !important;
        }

        .newlist_flex_0_hjee {
            width: 750rpx;
            height: 88rpx;
            overflow: hidden;
            z-index: 10;
            top: 0rpx;
            background: #fff;
            background-size: 100% auto !important;

            .newlist_fd0_0_hjee {
                padding: 0rpx 32rpx 0rpx 32rpx;

                .newlist_fd0_0_c1_c0_hjee {
                    font-size: 36rpx;
                    font-weight: 700;
                    color: #333333;
                    line-height: 50rpx;
                }
            }
        }

        .newlist_fd0_0_c0_hjee {
            width: 120rpx;

            .newlist_fd0_0_c0_c0_hjee {
                font-size: 36rpx;
                color: #333;
            }
        }
    }

    ::v-deep .newlist_benbenTabsfd1_0_c0_hjee {
        width: 750rpx;
        height: 91rpx;
        white-space: nowrap;
        background: #fff;
        text-align: center;
        font-size: 32rpx;
        font-weight: 400;
        color: #999999;
    }
</style>